<style lang="scss" scoped>
    .mshop-my {
        .img-background {
            text-align: center;
            position: relative;

            .setting-icon {
                background: url('../assets/settings.png') no-repeat;
                background-size: 16px 16px;
                width: 16px;
                height: 16px;
                display: inline-block;
                position: absolute;
                right: 12px;
                top: 8px;
                z-index: 10;
            }

            .background {
                img {
                    width: 100%;
                    max-height: 180px;
                    filter: blur(40px);
                    margin: -5px -10px -10px -5px;
                }

                overflow: hidden;
            }

            .content {
                position: absolute;
                top: 30px;
                left: 0;
                right: 0;

                img {
                  width: 80px;
                  height: 80px;
                  border-radius: 50%;
                  border: 2px solid #ececec;
                }
            }

            p {
                text-align: center;
                color: white;
            }

            .setting-icon {

            }
        }

        .flexable-container {
            padding: 0px 0;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .flexable-item {
                padding: 10px 0 10px 10px;
                display: inline-block;
                text-align: center;
                color: black;
                position: relative;

                > img {
                    width: 20px;
                    height: 20px;
                }

                &:last-child {
                    border-left: 2px solid #eee;
                }

                .vux-badge {
                    position: absolute;
                    top: 4px;
                    font-size: 12px;
                    transform: scale(.8);
                }
            }
        }

        .points {
            padding: .6em;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .my {
                p {
                    display: inline-block;
                }

                .point {
                    color: red;
                }
            }

            .button {
                p {
                    border: 1px solid #999;
                    padding: .2em .6em;
                    border-radius: .4em;

                    &:active {
                        background-color: #999;
                        color: white;
                    }
                }
            }
        }

        .config {
            margin-top: 15px;
        }

    }

</style>

<template>
    <div class="mshop-my">
        <div class='img-background'>
            <a class="setting-icon" v-link="{path: 'config', append: true}" ></a>
            <div class="background">
                <img :src="user.img" class="blur" />
            </div>
            <div class="content">
                <img :src="user.img" />
                <p>{{user.name}}</p>
            </div>
        </div>

        <div class="flexable-container" v-if="shop_type.type !== 'integral'">
            <a class="flexable-item" v-for="order in setting_order" v-link="{path: 'orders', append: true, query: order.link}" >
                <img :src="order.img">
                <p>{{order.title}}</p>
                <badge v-if="badges[$index] > 0" :text="badges[$index]"></badge>
            </a>
        </div>

        <div class="points" v-if="shop_type.type === 'integral'">
            <div class="my">
                <p>我的积分:</p>
                <p class="point">{{ point_balance }}</p>
            </div>

            <div class="button">
                <p v-link="{path: 'orders', append: true}">兑换记录</p>
            </div>
        </div>

        <group class="config">
            <cell title="设置" value="收货地址管理" :link="{path: 'config', append: true}" ></cell>
        </group>
        <tabbar></tabbar>
    </div>
</template>

<script>
    import Tabbar from 'util-components/tabbar.vue'
    import Blur from 'vux-components/Blur'
    import Badge from 'vux-components/Badge'
    import Cell from 'vux-components/Cell'
    import Group from 'vux-components/Group'
    import myService from 'services/my'

    import getters from '../vuex/getters'

    const temp_user = {
        img: '/static/4.jpeg',
        name: '管理员'
    }

    const setting_order = [
        {img: require('../assets/draft.png'), title: '意向单', link: {state: 'draft'}},
        {img: require('../assets/pay.png'), title: '待付款', link: {state: 'pay'}},
        {img: require('../assets/delivery.png'), title: '待收货', link: {state: 'delivery'}},
        {img: require('../assets/comment.png'), title: '待评价', link: {state: 'done'}},
        {img: require('../assets/order.png'), title: '我的订单', link: {}},
    ]

    export default {
        data: () => ({
            user: {img: ''},
            setting_order: setting_order,
            badges: [],
            point_balance: 10,
        }),
        components: {
            Tabbar,
            Blur,
            Badge,
            Group,
            Cell
        },
        vuex: {
            getters
        },
        route: {
            data: ({to}) => {
                return myService
                    .fetch()
                    .then(({data}) => data, () => ({ user: temp_user }));
            }
        },
    }
</script>
